import { defineComponent, ref, computed, watch, onMounted, toRef, toRefs, watchEffect } from "vue"
import { use找组件 } from "amtf/hooks"
import emitter from "amtf/utils/emitter"
// import { cloneDeep } from "lodash"
import * as util from "amtf/utils"
import { getValByUnit, 拼组件名, 拼样式名 } from "amtf/utils"
const 主名 = "checkbox-group"
const 组件名 = 拼组件名(主名)

export default defineComponent({
    name: 组件名,
    props: {
        modelValue: {
            type: Array,
            default: () => [],
        },
        isVerticalShow: {
            type: Boolean,
            default: false,
        },
    },
    setup(props, ctx) {
        // console.log(`ctx 👉`, ctx)
        const { emit, slots, expose } = ctx
        const { 找子组件 } = use找组件()
        const children = ref([])
        // console.log(`props 👉`, props)
        watch(
            () => props.modelValue,
            newVal => {
                // console.log(`选择框组 modelValue  改变 ing👇`)
                const childComps = 找子组件(拼组件名("checkbox"))
                // console.log(`选择框 组 childComps 👉`, childComps)
                if (childComps.length > 0) {
                    childComps.forEach(child => {
                        // console.log(`child 👉`, child)
                        child.component.exposed.updateModelByGroup(newVal)
                    })
                }

                // 多个组件会混淆
                // emitter.emit('多选组事件', newVal)
            }
            // { immediate: true }
        )

        const updateModel = (label, checkedVal) => {
            console.log(`选择框组 updateModel ing👇`)
            // console.log(`label 👉`, label)
            // console.log(`checkedVal 👉`, checkedVal)
            const index = props.modelValue.indexOf(label)
            // let 新值 = cloneDeep(props.modelValue)
            let 新值 = util.深拷贝(props.modelValue)
            if (index > -1) {
                if (!checkedVal) {
                    // props.modelValue.splice(index, 1)
                    新值.splice(index, 1)
                }
            } else {
                if (checkedVal) {
                    // props.modelValue.push(label)
                    新值.push(label)
                }
            }
            emit("input", 新值)
            // console.log(`emit('update:modelValue', 新值) ing👇`)
            emit("update:modelValue", 新值)
            // 先更新模型值，触发子选择框的选中逻辑，再触发其他事件

            // console.log(`emit('on-checked-change' ing👇`)
            emit("checked-change", 新值)
            // emit('on-checked-change', 新值)
            // emitter.emit('多选组事件', props.modelValue)
        }

        // console.log(`slots.default() 👉`, slots.default())

        onMounted(() => {
            // 可以在这里根据需要进行一些初始化操作
        })

        expose({ updateModel })

        return () => <div class={拼样式名(主名)}>{slots.default()}</div>
    },
})
